<template>
	<view class="goods">
		<view class="complaints_header" :style="{ paddingTop: StatusBar + 'px' }">
			<view class="header_box">
				<view class="header_back" @click="navigateBack()">
					<text class="iconfont icon-Left"></text>
				</view>
				<view class="header_head">
					<view class="head_item" :class="comment_id == 1 ? 'current': ''" @click="tap_comment(1)">
						<text>我的砍价</text>
					</view>
					<view class="head_item"  :class="comment_id ==2 ? 'current': ''"  @click="tap_comment(2)">
						<text>买家砍价</text>
					</view>
				</view>
			</view>
			<view class="header_tab">
				<view class="tab_item" :class="tab_id == item.id ? 'current' : ''" @click="tap_tab(item.id)" v-for="item in tab_list" :key="item.id">
					<text>{{item.text}}</text>
					<view class="item_icon"></view>
				</view>
			</view>
		</view>
		<view class="goods_list">
			<view class="list_item" v-for="item in data_list" :key="item.id">
				<view class="item_head">
					<view class="head_uid">商品编号：ADOUY676758</view>
					<view class="head_status">{{item.text}}</view>
				</view>
				<view class="item_content">
					<view class="content_image">
						<image src="@/static/logo.png" mode=""></image>
					</view>
					<view class="content_message">
						<view class="message_title">永劫无间-商品编号:159587,可二次实名
备注：z209,lv42,白银...</view>
						<view class="message_system">
							<view class="system_item" v-for="item in 2">网易邮箱出售</view>
						</view>
						<view class="message_auto">
							<view class="auto_icon">
								<view class="icon_one">
									<image src="~@/static/all_goods/icon_one.png" mode=""></image>
									<text>可买包赔</text>
								</view>
								<view class="icon_two">
									<image src="~@/static/all_goods/icon_two.png" mode=""></image>
									<text>顶级</text>
								</view>
							</view>
							<view class="auto_price">
								<text>￥</text>
								<text>1888</text>
							</view>
						</view>
						
					</view>
				</view>
				<view class="item_btn">
					<view class="btn_down" v-if="item.status == 3">下架</view>
					<view class="btn_del"  v-if="item.status != 3">删除商品</view>
					<view class="btn_right">
						<view class="btn_one" v-if="item.status == 3">改价</view>
						<view class="btn_two" v-if="item.status == 3">增加曝光</view>
						<view class="btn_two" v-if="item.status == 1">返回修改</view>
						<view class="btn_two" v-if="item.status == 2">重新发布</view>
						<view class="btn_two" v-if="item.status == 1 || item.status == 2">联系客服</view>
						<view class="btn_two" v-if="item.status == 4">上架</view>
						<view class="btn_two" v-if="item.status == 4">改价</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				tab_list: [
					{id:1, text: "全部"},
					{id:2, text: "待处理"},
					{id:3, text: "已还价"},
				],
				data_list: [
					{id: 1, status: 1, text: "审核中"},
					{id: 2, status: 2, text: "审核失败"},
					{id: 3, status: 3, text: "上架"},
					{id: 4, status: 4, text: "下架"},
				],
				tab_id:1,
				comment_id: 1,
				StatusBar: this.StatusBar
			}
		},
		methods: {
			tap_tab(id){
				this.tab_id = id
			},
			tap_comment(id){
				this.comment_id = id
			}
		}
	}
</script>
 <style>
	 page {
	 	display: -webkit-box;
	 	width: 100%;
	 	height: 100%;
	 	background: #F7F8FA;
	 }
	  
 </style>
<style  lang="scss" scoped>
	.goods {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.complaints_header {
		background: #fff;
		.header_box {
			display: flex;
			align-items: center;
			padding: 28rpx 32rpx;
			position: relative;
			font-weight: bold;
			margin-top: 18rpx;
			.header_back {
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.header_head {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				height: 84rpx;
				width: 480rpx;
				// margin: 32rpx 60rpx 16rpx;
				background: #FFFABE;
				border-radius: 68rpx;
				display: flex;
				align-items: center;
				.head_item {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					text {
						font-size: 32rpx;
						color: #22150B;
						font-weight: bold;
						margin-right: 12rpx;
					}
					image {
						width: 48rpx;
					}
					&.current {
						background-color: #FCE668;
						border-radius: 68rpx;
					}
				} 
			}
		}
		.header_tab {
			height: 104rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-left: 56rpx;
			.tab_item {
				font-size: 28rpx;
				color: #6C6C6C;
				margin-right: 48rpx;
				position: relative;
				&.current {
					color: #22150B;
					font-weight: bold;
					.item_icon {
						position: absolute;
						bottom: -8rpx;
						left: 50%;
						transform: translate(-50%, 0);
						width: 48rpx;
						height: 22rpx;
						background: url(~@/static/all_goods/yellow.png) no-repeat;
						background-size: 100%;
					}
					text {
						position: relative;
						z-index: 10;
					}
				}
			}
		}
	}
 
	.goods_list {
		flex: 1;
		overflow-y: scroll;
		box-sizing: border-box;
		padding: 24rpx 32rpx;
		.list_item {
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 24rpx;
			margin-bottom: 16rpx;
			.item_head {
				display: flex;
				align-items: center;
				.head_uid {
					font-size: 24rpx;
					color: #22150B;
				}
				.head_status {
					margin-left: auto;
					font-size: 24rpx;
					color: #FFB72C;
				}
			}
			.item_content {
				margin-top: 16rpx;
				display: flex;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #F3F3F3;
				.content_image {
					width: 160rpx;
					height: 164rpx;
					border-radius: 20rpx;
					overflow: hidden;
					background: #FFB72C;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.content_message {
					margin-left: 16rpx;
					flex: 1;
					.message_title {
						font-size: 24rpx;
						line-height: 30rpx;
						color: #22150B;
						font-weight: bold;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.message_system {
						margin-top: 8rpx;
						display: inline-block;
						.system_item {
							float: left;
							padding: 6rpx 16rpx;
							background: #FFFBEF;
							border-radius: 88rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20rpx;
							color: #995C00;
							margin: 0 8rpx 8rpx 0;
						}
					}
					.message_auto {
						display: flex;
						align-items: center;
						.auto_icon {
							display: flex;
							align-items: center;
							.icon_one {
								margin-right: 8rpx;
								width: 152rpx;
								height: 40rpx;
								background: linear-gradient( 90deg, #FFF3C7 0%, #F79135 100%);
								border-radius: 88rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								image {
									width: 28rpx;
									height: 28rpx;
								}
								text {
									font-size: 20rpx;
									line-height: 20rpx;
									color: #2E2516;
									margin-left: 8rpx;
								}
							}
							.icon_two {
								width: 104rpx;
								height: 40rpx;
								background: linear-gradient( 90deg, #322F23 0%, #A1652E 100%);
								border-radius: 88rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								image {
									width: 28rpx;
									height: 28rpx;
								}
								text {
									font-size: 20rpx;
									line-height: 20rpx;
									color: #FFFCE3;
									margin-left: 8rpx;
								}
							}
						}
						
						.auto_price {
							margin-left: auto;
							display: flex;
							align-items: flex-end;
							text {
								font-weight: bold;
								color: #FF2020;
								&:nth-child(1) {
									line-height: 24rpx;
									font-size: 24rpx;
								}
								&:nth-child(2) {
									line-height: 32rpx;
									font-size: 32rpx;
								}
							}
						}
					}
					
				}
			}
			.item_btn {
				padding-top: 28rpx;
				display: flex;
				align-items: center;
				.btn_down {
					font-size: 24rpx;
					color: #6C6C6C;
				}
				.btn_del {
					width: 160rpx;
					height: 52rpx;
					border-radius: 100rpx;
					border: 2rpx solid #D7D7D7;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #6C6C6C;
				}
				.btn_right {
					margin-left: auto;
					display: flex;
					align-items: center;
				}
				.btn_one {
					margin-left: 12rpx;
					width: 160rpx;
					height: 52rpx;
					background: #F3F3F3;
					border-radius: 100rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #22150B;
				}
				.btn_two {
					margin-left: 12rpx;
					width: 160rpx;
					height: 52rpx;
					background: #FDD637;
					border-radius: 100rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #22150B;
				}
			}
		}
	}
 
	
</style>